<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-width="80px">
        <el-form-item label="考试期数" class="filter-item">
          <el-input
            v-model="listQuery.condition.period"
            placeholder="请输入考试期数"
            style="width: 400px;"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="考试日期" class="filter-item">
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始日期"
              v-model="listQuery.condition.startTime"
              style="width: 100%;"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-col>
          <el-col style="text-align: center" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束日期"
              v-model="listQuery.condition.endTime"
              style="width: 100%;"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          icon="el-icon-refresh-left"
          @click="resetSearch"
        >
          重置
        </el-button>
      </el-form>
    </div>
    <div class="my-table">
      <div class="table-operate">
        <div class="title">数据列表</div>
        <div class="btns" v-if="hasPerm('admin')">
          <el-button
            class="operate-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            新增
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        :header-cell-style="headerCellStyle"
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="55">
        </el-table-column> -->
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="{ row, $index }">
            <span>{{ getIndex($index) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试期数">
          <template slot-scope="{ row }">
            <span>{{ row.period }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试日期" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ row.startTime | parseTime("{y}-{m}-{d}") }} 至
              {{ row.endTime | parseTime("{y}-{m}-{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="考试题库" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.qusLibNames }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试规则" align="center">
          <template slot-scope="{ row }">
            <span>满分{{ row.totalScore }}分，及格{{ row.passScore }}分</span>
          </template>
        </el-table-column>
        <el-table-column label="通过率" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat((row.passRatio * 100).toFixed(2)) || 0 }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hasPerm('admin')"
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- form -->
    <FormDialog ref="tableForm" @afterSubmit="afterSubmit" />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination";
import baseMixin from "@/mixins/list";
import FormDialog from "./modules/FormDialog";

export default {
  name: "Exam",
  components: { Pagination, FormDialog },
  directives: { waves },
  mixins: [baseMixin],
  data() {
    return {
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" }
      ],
      Urls: {
        listUrl: "/api/exam/ratio/page",
        delUrl: "/api/exam/delete/"
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    sortChange(data) {
      const { prop, order } = data;
      console.log("sort", data);
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    }
  }
};
</script>
